<template>
  <div class="search">
    <!-- 头部 navBar -->
    <van-nav-bar
      title="搜索中心"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 搜索框 输入就会触发，但是要做防抖优化 -->
    <!-- input输入时触发，search确认搜索时触发 -->
    <van-search
      v-model.trim="keyword"
      show-action
      shape='round'
      placeholder="请输入搜索关键词"
      @input="inputFn"
      @search="search(keyword)"
    >
    <!-- 插槽 -->
      <template #action>
        <div @click="search(keyword)">搜索</div>
      </template>
    </van-search>
    <!-- 根据关键字推荐 如果suggestionList有数据就显示推荐关键字列表，否者显示历史记录 -->
    <van-cell-group v-if="this.suggestionList.length > 0">
      <van-cell icon="search" v-for="(item ,index) in suggestionList" :key="index" @click="search(item)">
        <template #title>
          <div v-html='highLight(item)'></div>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录" />
      <van-cell :title="item" v-for="item in searchList" :key="item" @click="search(item)">
        <van-icon name="close" @click.stop="del(item)" />
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getSuggestion } from '@/api/search'
// 引入获取和设置历史记录
import { setHistory, getHistory } from '@/utils/storage'
export default {
  name: 'search',
  data () {
    return {
      // 关键字
      keyword: '',
      // 联想推荐列表
      suggestionList: [],
      // 搜索关键字的列表 从本地拿
      searchList: getHistory()
    }
  },
  methods: {
    // 输入时触发
    inputFn () {
      // 防抖，一开始先清理定时器，然后设置延时器0.5秒后执行，如果在此期间再执行这个函数，就清理上一次的延时器，并重新开启一个延时器重新计时
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        // 没内容不能发送 并且把suggestionList清空，这样就会显示历史记录
        if (!this.keyword) {
          this.suggestionList = []
          return
        }
        // 拿着关键字发请求
        const res = await getSuggestion(this.keyword)
        // console.log(res)
        // console.log(this.keyword)
        this.suggestionList = res.data.options
      }, 500)
    },
    // 跳转到搜索结果
    search (keyword) {
      if (!keyword) return this.$toast('请输入搜索内容')
      // 添加关键字到历史记录 1.把点击的关键字过滤掉把其他保留起来 2.把当前点击的关键字添加到searchList的首位 3.把searchList列表全部存在本地
      this.searchList = this.searchList.filter(item => item !== keyword)
      this.searchList.unshift(keyword)
      setHistory(this.searchList)
      // console.log('跳转', keyword)
      // 跳转到搜索结果页，并且把关键字带过去
      this.$router.push({
        path: '/search/result',
        query: {
          keyword
        }
      })
    },
    // 删除历史记录
    del (item) {
      // 删除当前选中的
      this.searchList = this.searchList.filter(v => v !== item)
      // 把searchList列表全部存在本地
      setHistory(this.searchList)
    },
    // 高亮
    highLight (str) {
      // 判断关键字，不区分大小写
      const reg = new RegExp(this.keyword, 'gi')
      // 函数里的参数就是关键字 reg：/ab/gi
      return str.replace(reg, function (match) {
        return `<span style='color:red'>${match}</span>`
      })
    }
  }
}
</script>

<style lang='less' scoped>

</style>
